<template>
  <div>
    shoppingcart
    <van-sticky>
  <div class="top">
    <span class="gouwuche">购物车</span>
    
    <span class="edit">编辑</span>
  <hr style="margin-top:20px,color:rgba(137, 162, 162, 0.1)" />
  </div>
  
</van-sticky>

    
 <div v-for="(item, index) in goods" :key="item.id" v-lazy="item">
      <!-- <van-checkbox-group v-model="result" ref="checkboxGroup"> -->
      <van-card
        :id="item.id"
        :num="item.bujingvalue"
        :price="item.price"
        :desc="item.discrip"
        :title="item.shoptitle"
        :thumb="item.img"
        :tag="item.tag"
        :origin-price="item.originprice"
      >
        <template #tags>
          <van-tag plain type="danger">好用得很</van-tag>
        </template>
        <template #footer>
          <van-row>
            <van-stepper
              :id="item.id"
              v-model="item.bujingvalue"
              integer
              min="0"
            />
            <van-checkbox
              :name="item.id"
              shape="square"
              v-model="item.isChecked"
              @click="chose(index)"
            ></van-checkbox>

            {{ item.isChecked }}
          </van-row>
        </template>
      </van-card>
      <!-- </van-checkbox-group> -->

     
    </div>

    

    //按钮
 <van-submit-bar
        :price="totalPrice"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox
          @click="checkAll"
          class="quan"
          shape="square"
          v-model="checked"
          >全选</van-checkbox
        >
        <template #tip>
          你的收货地址不支持同城送,
          <span @click="onClickEditAddress">修改地址</span>
        </template>
      </van-submit-bar>
    <van-tabbar>
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      goods: [
        {
          id: 1,
          shoptitle: "商品标题1",
          discrip: "描述信息1",
          originprice: "2",
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          isChecked: false,
          num: 30,
          price: 10,
          tag: "热卖",
          bujingid: 1,
          bujingvalue: "1",
        },
        {
          id: 2,
          shoptitle: "商品标题1",
          discrip: "描述信息1",
          originprice: "2",
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          isChecked: false,
          num: 30,
          price: 10.5,
          tag: "热卖",
          bujingid: 2,
          bujingvalue: "1",
        },
        {
          id: 3,
          shoptitle: "商品标题1",
          discrip: "描述信息1",
          originprice: "2",
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          isChecked: false,
          num: 30,
          price: 10,
          tag: "热卖",
          bujingid: 3,
          bujingvalue: "1",
        },
        {
          id: 4,
          shoptitle: "商品标题1",
          discrip: "描述信息1",
          originprice: "2",
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          isChecked: false,
          num: 30,
          price: 10,
          tag: "热卖",
          bujingid: 4,
          bujingvalue: "1",
        },
      ],
    };
  },
  methods: {
    chose(index) {
      //  console.log( this.goods[index].isChecked);
      // console.log(this.goods[index].isChecked !== false);
      if (this.goods[index].isChecked !== false) {
        this.goods[index].isChecked = true;
      } else {
        this.goods[index].isChecked = false;
      }
    },

    onSubmit(values) {
      console.log("submit", values);
    },
    checkAll() {
      console.log(this.checked == false);
      if (this.checked !== false) {
        this.goods.forEach((item) => {
          item.isChecked = true;
          this.checked = true;
        });
      }else{
        this.goods.forEach((item) => {
          item.isChecked = false;
          this.checked = false;
        });
      }
    },
  

  onClickEditAddress() {},
  edit() {
    this.$router.push("/editshoppingcart");
  },

  created() {
    console.log(this);
    console.log(this.result);
  },
  },
  computed: {
    totalPrice() {
      // 总价格=所有选中的商品的价格*数量
      let totalMoney = 0;
      let checkedGoods = [];

      checkedGoods = this.goods.filter((item) => {
        return item.isChecked === true;
      });
      checkedGoods.forEach((item) => {
        totalMoney += item.price * 100 * item.bujingvalue;
      });
      console.log(this.goods);
      console.log(checkedGoods);
      return totalMoney;
    },
  },
};
</script>

<style>
.van-submit-bar {
  bottom: 60px;
}
.van-button--mini {
  width: 30px;
}
.editbottom {
  border: 1px solid rgb(214, 214, 214);
  margin-top: 40px;
}
.delbtn {
  width: 200px;
  text-align: center;
}
.del {
  float: right;
}
.quan {
  margin-left: 20px;
}
.top{
  background-color: #fff;
  height: 50px;
  margin: 0;
  line-height: 40px;
}
.edit{
 padding-right: 20px;
   float: right;
}
.gouwuche{
 margin-left: 60px;
  
}
</style>